<style scoped>
.container {
  width: 100%;
  display: flex;
}
</style>
<template>
  <Header></Header>
  <div class="container">
    <Main></Main>
    <Aside></Aside>
  </div>
  <input type="text" ref="input" value="hello">
  <div ref="box">hello box</div>
</template>
<script lang="ts" setup>
import Header from './components/header.vue';
import Main from './components/Main.vue';
import Aside from './components/Aside.vue';
import { onMounted, useTemplateRef } from 'vue';
// 拿到的是 vue 的对象 ,  input.value 获取 js 对象
let input = useTemplateRef("input");
let box = useTemplateRef("box");
onMounted(() => {
  console.log(input.value?.value);
  console.log(box.value?.innerHTML);
})

</script>